<template name="component-name">
  <el-row class="visual-header">
    <el-col :span="8" class="visual-header-time lh-12">{{
      headerInfo.time
    }}</el-col>
    <el-col :span="8" class="visual-header-title align-center" :class="subtitle ? 'lh-6' : 'lh-12'">
      <div>{{headerInfo.title}}</div
      <div>{{subtitle}}</div>
    </el-col>
    <el-col :span="8" class="visual-header-compony align-right lh-12">{{
      headerInfo.compony
    }}</el-col>
  </el-row>
</template>
<script>
import getTime from '../../utils/time.js'
export default {
  name: '',
  props: ['subtitle'],
  data() {
    return {
      timer: null,
      headerInfo: {
        compony: '天津东方泰瑞科技有限公司',
        title: '安全风险分级管控与隐患排查治理信息化平台',
        time: 'yyyy-MM-dd HH:mm:ss',
      },
    }
  },
  created() {
    // console.log(getTime.getTime().dayTime())
    let timeObj = getTime.getTime()
    this.headerInfo.time = timeObj.dayTime()

    this.timer = setInterval(() => {
      this.headerInfo.time = timeObj.dayTime()
    }, 1000)
  },
  destroyed() {
    clearInterval(this.timer)
  },
}
</script>
<style lang="less" scoped>
.lh-12 {
  line-height: 8vh;
  font-size: 18px;
}
.lh-6 {
  margin-top: 1vh;
  line-height: 3vh;
  font-size: 18px;
  font-weight: bold;
  color: #2DC8E3;
}
</style>